<template >
	<div class="contain-report">
		<div class="report-title">修改密码</div>
		<div class="report-form">
			<el-form ref="form" :model="form" :rules="rules" label-width="80px" size="medium">
				<el-form-item label="旧密码:" prop="oldPassword">
					<el-input placeholder="请输入旧密码" v-model="form.oldPassword"></el-input>
				</el-form-item>
				<el-form-item label="新密码:" prop="newPassword">
					<el-input  placeholder="请输入新密码" v-model="form.newPassword"></el-input>
				</el-form-item>
				<el-form-item label="新密码:" prop="checkPassword">
					<el-input  placeholder="请再次输入新密码" v-model="form.checkPassword"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div style="margin: 50px auto;display: flex;justify-content: center">
			<el-button type="primary" @click="change('form')">更改信息</el-button>
		</div>
	</div>
</template >

<script >
	import {passData } from "../api/user";

    export default {
        data(){
            // 验证确认密码
            let checkRePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                }else if (value !== this.form.newPassword) {
                    console.log(value)
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            };
            return{
                userInfo:{},
                form:{
                    checkPassword: "",
                    newPassword: "",
                    oldPassword: "",
                    userId: null
                },
                rules: {
                    oldPassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 18, message: "长度在 6 到 18个字符", trigger: "blur" },
                    ],
                    newPassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 6, max: 18, message: "长度在 6 到 18个字符", trigger: "blur" },
                    ],
                    checkPassword:[{ required: true, trigger: 'blur', validator: checkRePass }],
                },
            }
        },
        created() {
            this.userInfo = JSON.parse(sessionStorage.getItem('user'))
            this.form.userId = this.userInfo.id
        },
        methods: {
            change(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        passData(this.form).then(res => {
                            console.log(res)
                            if (res.data.code === 200){
                                this.$message.success('修改密码成功,请重新登录')
                                sessionStorage.clear()
                                setTimeout(()=>{
                                    this.$router.replace('/')
                                },2000)
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
    }
</script >

<style scoped lang="less">
	.contain-report{
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.report-title{
			font-size: 22px;
			color: #666;
		}
		.report-form{
			width: 50%;
			height: 200px;
			margin: 0 auto;
		}
	}
</style >
